<template>
  <view class="filter-section">
    <view class="status-bar" />
    <wk-nav-bar
      title="时间范围"
      pervent
      @back="handleCancel">
      <!-- #ifndef MP-WEIXIN -->
      <button
        class="button white-btn"
        @click="handleSave">
        确定
      </button>
      <!-- #endif -->
    </wk-nav-bar>

    <view class="time-filter">
      <view class="title">
        时间
      </view>
      <view class="box">
        <view
          v-for="(item, index) in options"
          :key="index"
          :class="{ active: index === timeIndex }"
          class="box-item"
          @click="handleTimeRange(index)">
          {{ item.label }}
        </view>
      </view>
    </view>

    <view class="defined-filter">
      <view
        class="start time-box"
        @click="handleChooseDate('startTime')">
        <image
          :src="$static('images/icon/calendar_gray.png')"
          class="calendar-icon" />
        <text v-if="durationTime.startTime">
          {{ durationTime.startTime }}
        </text>
        <text v-else class="wk-placeholder">
          开始时间
        </text>
      </view>

      <text class="ident">
        --
      </text>

      <view
        :class="{ active: !!durationTime.endTime }"
        class="end time-box"
        @click="handleChooseDate('endTime')">
        <image
          :src="$static('images/icon/calendar_gray.png')"
          class="calendar-icon" />
        <text v-if="durationTime.endTime">
          {{ durationTime.endTime }}
        </text>
        <text v-else class="wk-placeholder">
          结束时间
        </text>
      </view>
    </view>

    <!-- #ifdef MP-WEIXIN -->
    <view class="btn-group">
      <button class="button reset-btn" @click="handleReset">
        <image
          :src="$static('images/icon/delete_besom.png')"
          class="icon" />
        重置
      </button>
      <button class="button" @click="handleSave">
        确定
      </button>
    </view>
    <!-- #endif -->

    <uni-popup ref="popup" type="picker">
      <wk-date-picker
        v-model="timeValue"
        type="date"
        @select="handleSelectTime" />
    </uni-popup>
  </view>
</template>

<script>
  import moment from 'moment'

  export default {
    name: 'FilterSection',
    props: {
      filterData: {
        type: Object,
        default: () => {}
      }
    },
    data() {
      return {
        timeIndex: null,
        options: [
          { label: '今天', value: 'today' },
          { label: '昨天', value: 'yesterday' },
          { label: '本周', value: 'week' },
          { label: '上周', value: 'lastWeek'},
          { label: '本月', value: 'month' },
          { label: '上月', value: 'lastMonth' },
          { label: '本季度', value: 'quarter' },
          { label: '上季度', value: 'lastQuarter' },
          { label: '本年', value: 'year' },
          { label: '去年', value: 'lastYear' }
        ],

        durationTime: {
          startTime: '',
          endTime: ''
        },
        timeValue: '',
        dateField: null
      }
    },
    watch: {
      filterData: {
        handler(val) {
          if (this.$isEmpty(val)) return
          if (this.$isEmpty(val.timeIndex)) {
            this.timeIndex = null
            this.durationTime = {
              startTime: val.data.startTime.slice(0, 10),
              endTime: val.data.endTime.slice(0, 10),
            }
          } else {
            this.timeIndex = Number(val.timeIndex)
            this.durationTime = {
              startTime: '',
              endTime: '',
            }
          }
        },
        deep: true,
        immediate: true
      }
    },
    methods: {
      handleTimeRange(index) {
        this.timeIndex = index
        this.durationTime = {
          startTime: '',
          endTime: ''
        }
      },

      handleChooseDate(field) {
        this.timeValue = this.durationTime[field]
        this.dateField = field
        this.$refs.popup.open()
      },

      handleSelectTime(date, next) {
        this.durationTime[this.dateField] = date
        let start = this.durationTime.startTime || null
        let end = this.durationTime.endTime || null
        if (start && end) {
          if (start > end) {
            this.durationTime[this.dateField] = ''
            this.$toast('开始时间不能大于结束时间')
          } else {
            this.timeIndex = null
          }
        }
        next()
      },

      handleCancel() {
        this.$emit('close')
      },

      handleReset() {
        this.handleTimeRange(0)
      },

      handleSave() {
        let start = this.durationTime.startTime || null
        let end = this.durationTime.endTime || null
        if (this.$isEmpty(this.timeIndex)) {
          if (!start || !end) {
            this.$toast('请选择筛选时间段')
            return
          }
          this.$emit('change', {
            data: {
              startTime: start + ' 00:00:00',
              endTime: end + ' 23:59:59'
            },
            timeIndex: this.timeIndex,
            timeStr: start + '~' + end
          })
        } else {
          switch (this.timeIndex) {
          case 0:
            // 今天
            start = moment()
            end = moment()
            break;
          case 1:
            // 昨天
            start = moment().subtract(1, 'days')
            end = moment().subtract(1, 'days')
            break;
          case 2:
            // 本周
            start = moment().day(1)
            end = moment()
            break;
          case 3:
            // 上周
            start = moment().day(-6)
            end = moment().day(0)
            break;
          case 4:
            // 本月
            start = moment(moment().format('YYYY-MM'))
            end = moment()
            break;
          case 5:
            // 上月
            start = moment().startOf('month').subtract(1, 'months')
            end = moment().endOf('month').subtract(1, 'months')
            break;
          case 6:
            // 本季度
            start = moment().startOf('quarter')
            end = moment()
            break;
          case 7:
            // 上季度
            start = moment().startOf('quarter').subtract(1, 'quarters')
            end = moment().endOf('quarter').subtract(1, 'quarters')
            break;
          case 8:
            // 本年
            start = moment().startOf('year')
            end = moment()
            break;
          case 9:
            // 去年
            start = moment().startOf('year').subtract(1, 'years')
            end = moment().endOf('year').subtract(1, 'years')
            break;
          }
          this.$emit('change', {
            data: {
              startTime: start.format('YYYY-MM-DD') + ' 00:00:00',
              endTime: end.format('YYYY-MM-DD') + ' 23:59:59'
            },
            timeIndex: this.timeIndex,
            timeStr: this.options[this.timeIndex].label
          })
        }

        this.$emit('close')
      }
    }
  }
</script>

<style scoped lang="scss">
.filter-section {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 100;
  width: 100%;
  height: 100%;
  background-color: $main-bg;

  .time-filter {
    font-size: 28rpx;
    background-color: white;
    padding: 32rpx 30rpx 0;

    .title {
      width: 120rpx;
      font-size: 32rpx;
      color: #999;
    }

    .box {
      width: 100%;
      display: flex;
      justify-content: space-between;
      flex-wrap: wrap;
      margin-top: 20rpx;

      .box-item {
        width: 30%;
        height: 64rpx;
        color: #666;
        background-color: #f4f4f4;
        border-radius: 10rpx;
        margin-bottom: 30rpx;
        @include center;

        &.active {
          color: white;
          background-color: #2364fb;
        }
      }
    }
  }

  .defined-filter {
    font-size: 28rpx;
    padding: 20rpx 30rpx;
    background-color: white;
    @include left;

    .time-box {
      flex: 1;
      text-align: center;
      border: 1rpx solid #E1E1E1;
      border-radius: 6rpx;
      padding: 15rpx;
      @include left;

      &.active {
        color: #333;
      }

      .calendar-icon {
        width: 38rpx;
        height: 38rpx;
        margin-right: 10rpx;
      }
      .wk-placeholder {
        font-size: inherit;
      }
    }
    .ident {
      color: #CDCDCD;
      padding: 0 30rpx;
    }
  }

  .btn-group {
    background-color: white;
    padding: 30rpx;
    @include center;
    .button {
      flex: 1;
      height: 80rpx;
      color: white;
      font-size: $wk-font-base;
      background-color: $theme-color;
      border-radius: 12rpx;
      @include center;
    }
    .reset-btn {
      color: $dark;
      background-color: #F5F5F5;
      margin-right: 30rpx;
      .icon {
        width: 32rpx;
        height: 32rpx;
        vertical-align: baseline;
        margin-right: 10rpx;
      }
    }
  }
}
</style>
